@charset "utf-8";


#entryTrad {
	display: block;
}

.innerContent img {
	width: 100%;
	box-shadow: 2px 2px 5px rgb(0, 0, 0, 0.3);
	border: solid 1px #aaa;	
}
.entryContentStyle {
	position: relative;
}
.entryContentStyle img {
	display: inline-block;
	width: 20%;
	margin: 0 0.3vw 1vw 0;
}
#entryDesignCont, #entryDesignContEight {
	display: none;
}

.noThumbs {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
}
.noThumbs::after {
	content: "This door style is not available in 8' high";
	position: absolute;
	top: 0;
	left: -1vw;
	padding: 4vw 2vw;
	font-size: 1.5vw;
	font-weight: bold;
	background-color: rgb(255, 255, 255, 0.9);
	border: solid 1px #aaa;
	border-radius: 3px;
	margin-top: 10%;
	color: #000;
	width: 100%;
	height: 16vw;
}


/* STEEL COLORS */

.white {background-color: white;}
.black {background-color: black;}
.cashmere {background-color: #e9e6d4;}
.cream {background-color: #d1c2a1;}
.pebble {background-color: #897f6a;}
.sandlewood {background-color: #b5a292;}
.sierra {background-color: #6c553e;}
.potteryclay {background-color: #b9764e;}
.moonlitmoss {background-color: #5e584b;}
.slate {background-color: #574f4b;}
.countryred {background-color: #581315;}
.burgundy {background-color: #492831;}
.chestnutbrown {background-color: #311f18;}
.commercialbrown {background-color: #382224;}
.stained {background-color: #382224;}
.midnightsurf {background-color: #535250;}
.wedgewoodblue {background-color: #6c747e;}

.mocha {background-color: #d4cabe; }
.ivory {background-color: #e1e1c9;}
.beige {background-color: #978b7e;}
.brownstone {background-color: #9f8e7a;}
.wicker {background-color: #c9b9a0;}
.red {background-color: #b21009;}
.venetianred {background-color: #672d2c;}
.oldworldblue {background-color: #415969;}
.forestgreen {background-color: #08402e;}
.storm {background-color: #808285;}
.flagstonegrey {background-color: #969897;}
.charcoal {background-color: #3b443f;}
.windsweptsmoke {background-color: #5b5e55;}
.terratone {background-color: #726459;}
.cactus {background-color: #767769;}
.ironore {background-color: #3a3f38;}
.nutmeg {background-color: #3e281d;}
.mocabrown {background-color: #41362a;}
.antiquebrown {background-color: #3c2f2f;}
.alucopper {background-color: #7d4925;}

/* FIBERGLASS COLORS */

.carameloak {background-image: url('../images/entry/d-84.jpg');}
.teak {background-image: url('../images/entry/specialWalnut.jpg');}
.hickory {background-image: url('../images/entry/b-12.jpg');}
.crimsonash {background-image: url('../images/entry/d-47.jpg');}
.earlyamerican {background-image: url('../images/entry/b-11.jpg');}
.toffee {background-image: url('../images/entry/brownCherry.jpg');}
.espresso {background-image: url('../images/entry/b-12.jpg');}
.darkteak {background-image: url('../images/entry/legacyMahogany.jpg');}
.cranberry {background-image: url('../images/entry/brownCherry.jpg');}
.blueash {background-image: url('../images/entry/fiberCharcoal.jpg');}
.walnut {background-image: url('../images/entry/fiberSandstone.jpg');}
.silverash {background-image: url('../images/entry/b-05.jpg');}
.darkchocolate {background-image: url('../images/entry/brownCherry.jpg');}


.entryDoorDetailsBtn {
	width: 100%;
	background-color: tomato;
	color: white;
	border: solid 1px tomato;
	padding: 0.7vw;
	font-size: 1.5vw;
	cursor: pointer;
	opacity: 0.9;
	margin-top: 0.5vw;
}
.entryDoorDetailsBtn:hover{
	background-color: white;
	color: tomato;
}

.entrygallery {
	position: relative;
	display: inline-block;
	width: 50%;
	vertical-align: top;
	cursor: pointer;
}
.entrygallery:hover::after {
	content: "Click Image to Enlarge";
	position: absolute;
	top: -1.4vw;
	right: 0;
	color: #333;
	font-size: 1.1vw;
}
.entrygallery img{
	padding: 0.2vw;
	border: solid 2px #ccc;
	width: 100%;
}

.eightThumbs {
	font-size: 1vw;
	display: inline-block;
	margin: 0.2vw 0.2vw 1vw 0.2vw;
	border: solid 1px #aaa;
	padding: 0.2vw 0.5vw;
	border-radius: 3px;
	cursor: pointer;
	opacity: 0.7;
}

.actThumbs, .eightThumbs:hover  {
	background-color: tomato;
	color: white;
	border: solid 1px tomato;
	opacity: 1;
}




#entryGlass h3, #entryDesign h3 {
	font-size: 1.3vw;
}
#entryGlassCont h3 {
	margin-bottom: 2vw;
}
.entryPanelCont  {
	position: relative;
	width: 7%;
	display: inline-block;
	margin: 0 1vw 1vw 1.2vw;
	box-sizing: border-box;
	text-align: center;
}
.entryPanelCont img{
	width: 100%;
	border: solid 1px #ccc;
	box-shadow: 2px 2px 6px rgb(0, 0, 0, 0.3);
	padding: 0.2vw;
}
.entryPanImg {
	cursor: pointer;
}
.entryPanImg:hover {
	opacity: 0.9;
}
.entryPanelCont:hover::after{
	content: 'Click to Display';
	position: absolute;
	top: -2vw;
	left: 0;
	width: 6vw;
	font-size: 0.8vw;
	z-index: 10;
	padding: 5px;
}
.capTextContainer {
	font-size: 0.9vw;
}
.capTextContainer span {
	font-size: 0.8vw;
}

.cappingImgContainer  {
	position: relative;
	display: inline-block;
	margin: 0 0.8vw 2vw 0.8vw;
	box-sizing: border-box;
	text-align: center;
	width: 11%;
}
.cappingImgContainer img{
	width: 100%;
	border: solid 1px #ccc;
	box-shadow: 2px 2px 6px rgb(0, 0, 0, 0.3);
	padding: 0.1vw;
	cursor: pointer;
}
.cappingImgContainer img:hover{
	opacity: 0.9;
}
.cappingImgContainer:hover::after{
	content: 'Click to Enlarge';
	position: absolute;
	top: -2vw;
	right: -2vw;
	width: 8vw;
	font-size: 0.8vw;
	z-index: 10;
	padding: 5px;
	text-align: right;
}
.cappingImgContainer p span, .cappingColCont p span {
	font-size: 0.9vw;
}
.cappingImgContainer p, .cappingColCont p {
	font-size: 0.7vw;
}
.glsPrcPop {
	position: absolute;
	top: 0;
	right: 0;
	background-color: #fff;
	border: solid 1px #aaa;
	padding: 0 0.2vw;
	font-size: 0.9vw;
}

/* - ENTRY DOORS OVERLAY- */

/* OVERLAY */

.overlayEntrycontent {
	position: relative;
	z-index: 30;
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-name: zoom;
	animation-duration: 0.6s; 
	border-right: 1vw solid white;	
	background-color: #fff;
	width: 87%;
	max-width: 1100px;
	margin: 4vw auto;
}

.overlayPopUp::after, .overlayENTRYPopUp::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 40%;
	height: 100%;
	background-color: rgb(199, 105, 61);
	opacity: 0.9;
}

/* MAIN DOOR IMAGE */
.blkOt {
	position: absolute;
	top: -25%;
	left: -25%;
	width: 150%;
	height: 150%;
	background-color: rgb(0, 0, 0, 0.5);
	z-index: 55;
	display: none;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.overlayEntryMainImages {
	position: sticky;
	top: calc(17vw - 2vw);
	left: 8vw;
	width: 39%;
	text-align: center;
	z-index: 60;
	-webkit-animation-name: fade-in;
	-webkit-animation-duration: 0.4s;
	animation-name: fade-in;
	animation-duration: 0.4s;
	margin: 0;
}
.overlayImageContainer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
/*
.overlayEntryMainImages:hover::after {
	content: "+";
	position: absolute;
	top: 2vw;
	z-index: 80;
	background-color: #fff;
	color: #333;
	font-size: 2vw;
	padding: 2vw 3vw;
	border: solid 1px #aaa;
	opacity: 0.7;
	cursor: pointer;
}
*/
.overlayENTRYMainHeading {
	position: absolute;
	z-index: 41;
	color: white;
	text-align: left;
	font-size: 0.9vw;
}
.overlayENTRYMainHeading span {
	font-size: 1.9vw;
	font-weight: bold;
}
.overlayENTRYMainHeading {
	top: -9vw;
	left: 0.5vw;
}

.overlayEntryLeftDoorContainer, .overlayEntryRightDoorContainer, 
.overlayEntryLeftLiteContainer, .overlayEntryRightLiteContainer,
.overlayEntryTopLiteContainer {
	position: absolute;
	top: 0;
}
.overlayEntryTopLiteImage, .overylayEntryTopLiteGlass {
	position: absolute;
	bottom: -3.8vw;	
	width: 100%;
	left: 0;
}
.overlayEntryTopLiteImage {
	z-index: 20;
}
.overlayEntryLeftLiteContainer {
	left: 10%;
}
.overlayEntryLeftDoorContainer, .overlayEntryTopLiteContainer {
	width: 37.9%;
	left: 28.5%;
}
.overlayEntryTopLiteContainer {
	display: none;
}
.overlayEntryRightDoorContainer {
	width: 0%;
	left: 47%;
}
.overlayEntryLeftLiteContainer, .overlayEntryRightLiteContainer {
	width: 19%;
	opacity: 0;
}
.overlayEntryRightLiteContainer {
	left: 66%;
}
.overlayEntryLeftDoorGlass, .overlayEntryRightDoorGlass,
.overlayEntryLeftDoorImage, .overlayEntryRightDoorImage, 
.overlayEntryLeftLiteImage, .overlayEntryRightLiteImage, 
.overlayEntryLeftLiteGlass, .overlayEntryRightLiteGlass,
.overlayEntryLeftDoorLock, .overlayEntryRightDoorLock, 
.overlayEntryLeftDoorSill, .overlayEntryRightDoorSill, 
.overlayEntryLeftLiteSill, .overlayEntryRightLiteSill,
.overlayEntryLeftDoorFrame, .overlayEntryRightDoorFrame, 
.overlayEntryLeftLiteFrame, .overlayEntryRightLiteFrame {
	position: absolute;
	bottom: -30.2vw;
	left: 0;	
	width: 100%;
}
.overlayEntryLeftDoorGlass, .overlayEntryRightLiteGlass, 
.overlayEntryRightDoorGlass, .overlayEntryLeftLiteGlass {
	z-index: 20;
}
.overlayEntryLeftDoorImage, .overlayEntryRightDoorImage,
.overlayEntryLeftLiteImage, .overlayEntryRightLiteImage  {
	margin-top: 0.6vw;
	z-index: 25;
}
.overlayEntryLeftDoorLock, .overlayEntryRightDoorLock {
	z-index: 30;
}
.overlayEntryLeftDoorFrame, .overlayEntryRightDoorFrame, 
.overlayEntryLeftLiteFrame, .overlayEntryRightLiteFrame {
	z-index: 60;
}
.overlayEntryLeftDoorFrame img, .overlayEntryRightDoorFrame img,
.overlayEntryLeftLiteFrame img, .overlayEntryRightLiteFrame img {
	width: 100%;
} 
.overlayEntryLeftLiteSill, .overlayEntryRightLiteSill,
.overlayEntryLeftDoorSill, .overlayEntryRightDoorSill  {
	z-index: 70;
	margin-bottom: -0.5vw;
}
.overlayEntryTopLiteImage img, .overylayEntryTopLiteGlass img {
	width: 100%;
}

.overlayEntryLeftDoorImage img, .overlayEntryRightDoorImage img,
.overlayEntryLeftDoorLock img, .overlayEntryRightDoorLock img {
	width: 95%;
} 
.overlayEntryLeftDoorSill img, .overlayEntryRightDoorSill img, .overlayEntryLeftLiteSill img, .overlayEntryRightLiteSill img  {
	width: 100%;
}
.overlayEntryLeftDoorGlass img, .overlayEntryRightDoorGlass img {
	margin-bottom: 0.6vw;
	width: 95.2%;
}

.overlayEntryLeftLiteImage img, .overlayEntryRightLiteImage img {	
	width: 82%;
}
.overlayEntryLeftLiteGlass img, .overlayEntryRightLiteGlass img{	
	margin-bottom: 0.2vw;
	width: 81%;
}
.flipImg, .rightDoor img, .rightLite img {
	-webkit-transform: scaleX(-1);
  	transform: scaleX(-1);
}


.overlayEntryTextAlert {
	position: absolute;
	bottom: -20vw;
	right: 2vw;
	font-size: 1.2vw;
	color: black;
	background-color: white;
	border: solid 1px #ccc;
	width: 20%;
	display: none;
	z-index: 55;
}
.overlayEntryTextAlert span{
	font-size: 1.8vw;
	color: tomato;
}
.overlayEntryTextAlert p{
	padding: 0 2vw;
}
.timescroll {
	width: 80%;
	height: 1vw;
	border: solid 1px #ccc;
	margin: 1vw auto;
}
.scroller {
	width: 5%;
	height: 100%;
	background-color: aquamarine;
}
.closer, .changeDirect, .changeBack {
	display: inline-block;
	background-color: tomato;
	color: #fff;
	border: solid 1px #ccc;
	border-radius: 5px;
	padding: 0.5vw;
	width: 60%;
	margin: 0.5vw auto;
	cursor: pointer;
	opacity: 0.8;
	display: none;
	text-align: center;
}
.closer {
	background-color: tomato;
}
.changeDirect, .changeBack {
	background-color: green;
}
.closer:hover {
	opacity: 1;
}



.quoteContainer {
	display: none;
	width: 100%;
	height: 100%;
}
.quotePopup {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	max-width: 1150px;
	margin: 2vw auto;
	background-color: white;
	z-index: 81;
}
.quotePriceBox {
	display: inline-block;
	width: 45%;
	padding: 1vw;
	text-align: left;
	vertical-align: top;
}
.quoteHead {
	margin: 0 4vw 1vw 1vw;
	font-size: 1.8vw;
	font-weight: bold;
	color: #555;
	border-bottom: solid 1px #aaa;
}
.quoteDetails {
	font-size: 1vw;
	margin: 2vw;
	padding: 2vw;
	border: solid 1px #bbb;
	background-color: #fff;
}
.quoteImg {
	width: 89%;
	position: relative;
}
.topTransoms {
	position: absolute;
	bottom: 2.2vw;
	left: 0%;
	width: 58.6%;
}
.topTransoms img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.topTransoms img:nth-child(1) {
	z-index: 30;
}
.leftLite, .rightLite, .leftDoor, .rightDoor {
	display: inline-block;
	position: relative;
}
.leftLite {
	width: 15%;
}
.rightLite {
	margin-left: -0.4vw;
	width: 15%;
}
.leftDoor, .rightDoor {
	margin-left: -0.4vw;
	width: 29.9%;
}
.leftLite img, .rightLite img, .leftDoor img, .rightDoor img{
	position: absolute;
	bottom: -25vw;
	width: 100%;
}
.leftLite img:nth-child(2), .leftLite img:nth-child(1),
.rightLite img:nth-child(2), .rightLite img:nth-child(1) {
	margin-left: 0.4vw;
	width: 82%;
} 
.leftLite img:nth-child(4), .rightLite img:nth-child(4) {
	width: 100.3%;
	z-index: 25;
}  
.leftDoor img:nth-child(1), .rightDoor img:nth-child(1) {
	margin-left: 0.4vw;
	width: 97.5%;
}
.leftDoor img:nth-child(2), .rightDoor img:nth-child(2) {
	margin: 0.4vw 0 0 0.4vw;
	width: 95%;
} 
.quoteFine {
	margin-top: 26vw;
	width: 90%;
}
.quoteDoorAlert, .quoteLiteAlert, .quoteAlert {
	font-size: 1vw;
}
.quotePrice {
	margin-top: 5vw;
}
.quoteFinPricetx{
	font-size: 1.1vw;
	margin: 1vw 0;
	font-weight: bold;
}
.quotePrcCont {
	padding-bottom: 0.2vw;
	margin-bottom: 0.3vw;
	border-bottom: solid 1px #aaa;
}
.quoteDrName {
	display: inline-flex;
}
.quotePrcItems, .quoteItmPrc {
	display: inline-block;
}
.quotePrcItems, .quoteItmPrc {
	width: 79%;
}
.quoteItmPrc {
	text-align: right;
	width: 19%;
}
.quoteName, .quotedrSz, .quoteDoorColor, .quoteFrameColor, .quoteSill,
.quoteWindowSize, .quoteGlass, .quoteLiteConfig, .quoteLiteSize, .quoteLites, .quoteDoorLock {
	font-weight: bold;
	font-size: 1.1vw;
}
.quoteDiscountItems {
	padding: 0.3vw 0;
	margin-left: 31%;
	font-size: 1vw;
	width: 100%;
}
.quoteDiscountItems input {
	padding: 0.3vw 0;
	width: 35%;
	margin-left: 1vw;
	height: 1vw;
	font-size: 1vw;
}
.discountBtn {
	margin-left: 0.5vw;
	padding: 0.3vw 0.5vw;
	cursor: pointer;
	vertical-align: bottom;
	font-size: 1vw;
}
.discountConfirm {
	text-align: right;
	padding-right: 0.4vw;
	width: 99%;
}



.quotePrctotal {
	display: inline-flex;
	width: 50%;
	padding: 0.3vw 0 0.3vw 58.8%;
}
.quotePrdes, .quoteFnPc, .quoteFnhst, .quoteFnTx {
	width: 40%;
	text-align: right;
}
.quoteFnTx, .quoteFnPc, .quoteFnhst {
	font-weight: bold;
}



.quoteBookCont {
	display: none;
}
.bookingHead {
	font-size: 1vw;
	font-weight: bold;
}
.quoteSubmitForm {
	display: inline-block;
	width: 45%;
}
.quoteBookingForm {
	position: relative;
	margin: 0 0 0 0;
	padding: 1vw 2vw;
	background-color: #efefee;
	border: solid 1px #ccc;
}
.quoteRequire {
	font-size: 0.8vw;
	text-align: right;
}
.formCont span {
	position: absolute;
	font-size: 1vw;
	padding: 0.2vw 0.5vw;
}
.bookingForm input, .bookingForm textarea {
	width: 94%;
	border-top: solid 1px #fff;
	border-left: solid 1px #fff;
	border-right: solid 1px #fff;
	border-bottom: solid 1px #aaa;
	padding: 1.9vw 0 0.2vw 0.8vw;
	outline-color: #aaa;
	font-size: 1vw;
}
.bookingForm input::placeholder {
	opacity: 0.7;
	background-color: white;
}
.bookingForm textarea {
	min-height: 7vw;
	resize: none;
}
.bookingForm textarea::placeholder {
	font-family: Arial, Helvetica, sans-serif;
	color: #aaa;
}
.bookingForm input::placeholder, .bookingForm textarea::placeholder {
	font-size: 1.2vw;
}
.method span {
	margin-bottom: 1vw;
}
.method span {
	font-size: 1vw;
	padding: 0.2vw 0.5vw;
}
.methodCont span {
	width: 9vw;
}

.methodCont {
	display: inline-flex;
}
.cancelBtn {
	border: solid 1px #aaa;
	font-size: 1vw;
	margin: 0.6vw auto;
	opacity: 0.8;
	cursor: pointer;
	width: 25%;
	text-align: center;
	padding: 0.7vw 3vw;
	color: #333;
	background-color: #eee;
}
.acceptBtn, .orderConfBtn {
	margin: 1vw auto 0 auto;
	width: 82%;
	text-align: center;
	font-size: 1.2vw;
	padding: 1vw 2.5vw;
	color: white;
	background-color:  rgb(44, 134, 44);	
	opacity: 0.8;
	cursor: pointer;
}
.cancelBtn:hover {
	background-color: #fff;
}
.acceptBtn:hover, .orderConfBtn:hover  {
	opacity: 1;
}
.commnt {
	display: none;
}

.confirmationPopUp {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 90;
	background-color: white;
	text-align: center;
	box-shadow: 1px 1px 5px rgb(0, 0, 0, 0.5);
	display: none;
}
.confirmationPopUp img {
	width: 10%;
}
.confirmationPopUp h3 {
	margin-top: 3vw;
	padding: 1vw;
}
.confirmationPopUp h2 {
	margin-top: 8vw;
}
.confirmationPopUp p {
	width: 70%;
	font-size: 1vw;
	margin: 1vw auto 4vw auto;
}
/* BODY */



/* HEADING */

.OLPrHd {
	position: absolute;
	z-index: 25;
	top: 31vw;
	left: 0.5vw;
	width: 92%;
	cursor: pointer;
	color: #333;
	text-align: Left;
	padding: 1.5vw 0 1.5vw 1.5vw;
	background-color: #fff;
	z-index: 18;
}
.OLTtl {
	display: inline-block;
	font-size: 1.1vw;
	width: 70%;
}
.OLTtl h3 {
	margin: 0 0 0.5vw 0;
}
.OLTtl strong {
	font-size: 1.8vw;
}
.OLPr {
	display: inline-block;
	padding: 1.5vw 1.3vw;
	background-color: rgb(44, 134, 44);
	color: white;
	opacity: 0.8;
	vertical-align: top;
	margin: 3.5vw 0 0 0;
	font-size: 1.2vw;
	width: 20%;
	text-align: center;
}
.OLPr:hover {
	opacity: 1;
}
.fnlPcDetails, .fnPcs {
	display: inline-block;
	border-bottom: solid 1px #ddd;
	padding: 0.2vw 0.4vw;
}
.fnlPcDetails {
	width: 65%;
}
.fnlPcDetails span {
	font-weight: bold;
	color: green;
	border: solid 1px green;
	padding: 2px;
}
.fnlPcL, .fnlPcG {
	display: none;
}
.fnlPcT { 
	display: flex;
	padding: 0.9vw 0 0 0.4vw;
}
.OLSubTtl {
	padding: 0 0.2vw;
	font-weight: bold;
	font-size: 1.2vw;
}
.fnlSubTtl {
	font-size: 2vw;
	font-weight: bold;
	margin-top: -0.5vw;
}



/* CONTENT CONTAINER */

.overlayENTRYContainer {
	width: 100%;
}
.OverlayOptionsContainer {
	position: relative;
	float: right;
	width: 52%;
	padding: 1.5vw;
	background-color: white;
	border: solid 1px #ccc;
	margin: 2vw 1vw 6vw 1vw;
}
.OLsmallHead {
	font-size: 0.8vw;
	margin-bottom: 0.3vw;
}
.OverlayOptionsContainer h3 {
	font-size: 2.1vw;
	margin: 0;
}
.OverlayOptionsContainer p {
	font-size: 1vw;
	margin: 0.5vw 0;
}
.overlayContentWindows h4 {
	font-size: 1.5vw;
	margin: 1.5vw 0;
}

.OverlayENTRYInnerContainer {
	padding-bottom: 3vw;
	margin-bottom: 2vw;
	border-bottom: solid 1px #ccc;
}
.OverlayENTRYOptionsTabs {
	position: relative;
	margin-bottom: 1vw;
	background-color: rgb(255, 96, 68, 0.9);
	color: white;
	width: 95%;
	text-align: center;
	padding: 1vw 1vw;
	font-size: 1.8vw;
}

.OverlayCutOutImage {
	position: absolute;
	top: 6vw;
	right: 0;
	width: 28%;
	max-width: 145px;
}
.OverlayCutOutImage img {
	width: 100%;
}

.ENTRYSelectorsP {
	padding: 1.2vw 0 0.5vw 0;
	font-size: 1.6vw;
}
.ENTRYSelectorsP p{
	font-size: 0.8vw;
	margin: 0 0 0.5vw 0;
}

.OlDoorSizes {
	font-size: 1vw;
}
.OlDoorSizes p {
	display: inline-block;
	margin-right: 1.5vw;
}

.OlDblDoorSizes {
	font-size: 1vw;
}
.OlDblDoorSizes p {
	display: inline-block;
	margin: 0 4vw 0 1vw;
}
.OlSnlDoorSizes p {
	display: inline-block;
	margin-left: 4.8vw;
}
.OlSnlDoorLites p {
	display: inline-block;
}
.OlSnlDoorLites p:nth-child(1) {
	margin-right: 1.5vw;
}
.OlSnlDoorLites p:nth-child(2) {
	margin-right: 3vw;
}
.OlSnlDoorLites p:nth-child(3) {
	margin-right: 3vw;
}



.drExisting {
	border: solid 1px #aaa;
	padding: 1vw 0.5vw;
}

.drHeightLbl {
	font-size: 1.3vw;
	margin-bottom: 1.5vw;
	font-weight: bold;
}
.drHeightLbl span {
	margin-bottom: 1.5vw;
	background-color: rgb(255, 90, 70, 0.9);
	color: white;
	padding: 0.2vw 0.5vw;
}
.drHeightLbl strong {
	font-size: 2vw;
	color: tomato;
}
.drheightContDouble, .drliteContDouble8, .drliteContSingle8, .drliteContDouble, .drliteContSingleT, .drliteContDoubleT, .drFinalConfigInner {
	display: none;
}
#configs110 {
	display: block;
}
.drheightCont, .drheightContSingle {
	display: inline-block;
}
.drheightCont {
	width: 38%;
}
.drheightContSingle {
	border-left: solid 1px #ccc;
	width: 54%;
}
.drliteCont, .drFinalConfig, .drFinalConfig {
	border: solid 1px #ccc;
	margin: 0.5vw 0;
	padding: 1vw;
}
.recConfig, .altConfig{
	display: inline-block;
	position: relative;
	padding: 3vw 0 0 0.5vw;
	margin-top: 3vw;
	width: 100%;
}

.altConfig, .recConfig {
	border: solid 2px #ccc;
}
.recConfig::after {
	content: "Recommended Configurations";
	position: absolute;
	top: -1.8vw;
	right: -1vw;
	background-color: lawngreen;
	color: #111;
	padding: 0.3vw 0.5vw;
	z-index: 50;
	font-size: 1vw;
}
.altConfig::after {
	content: "Additional Available Configurations";
	position: absolute;
	top: -1.8vw;
	right: -1vw;
	background-color: #a1a1a1;
	color: #333;
	padding: 0.3vw 0.5vw;
	z-index: 50;
	font-size: 1vw;
}

.drheightCont, .drheightContDouble, .drheightContSingle {
	padding: 0.5vw 0vw 1vw 0.5vw;
}

.singleEntry6, .singleEntryT, .singleEntryTransom, .singleEntryTransomL, .singleEntryTransomB, .doubleEntryT,
.singleEntry, .doubleEntry, .doubleEntry6, .singleEntryL, .singleEntryB, .singleEntry8, .doubleEntry8, .doubleEntry8lites,
.overlayEntryLiteSelN, .overlayEntryLiteSelL, .overlayEntryLiteSelR, .overlayEntryLiteSelB, .doubleEntrylites, .doubleEntryTransom {
	display: inline-block;
	margin-right: 1vw;
	background-size: 100%;
	background-repeat: no-repeat;
	box-shadow: 1px 2px 3px rgb(0, 0, 0, 0.1);
	border: solid 1px #ccc;
}

.singleEntry, .singleEntry6, .singleEntryL, .singleEntryB, .doubleEntry, .doubleEntry6, .doubleEntrylites, .overlayEntryLiteSelN,
.overlayEntryLiteSelL, .overlayEntryLiteSelR, .overlayEntryLiteSelB {
	height: 10.8vw;
}
.singleEntry8, .singleEntryT, .doubleEntry8, .doubleEntryT, .doubleEntry8lites,
.singleEntryTransomL, .singleEntryTransomB, .doubleEntryTransom {
	height: 12.8vw;
}

.drheightCont .singleEntry {
	width: 27.5%;
	margin-top: 1.7vw;
}
.drliteContSingle .singleEntry, .drFinalConfigInner .singleEntry {
	width: 10.8%;
	margin-top: 1.7vw;
}
.singleEntryL {
	width: 16.5%;
}
.singleEntryTransomL {
	width: 17.2%;
}
.singleEntryTransomB {
	width: 23.1%;
}
.singleEntryB, .doubleEntryTransom, .drFinalConfigInner .doubleEntry {
	width: 22.2%;
}
.drheightCont .doubleEntry {
	width: 55%;
	margin-top: 1.7vw;
}
.doubleEntry6 {
	width: 21.5%;
	margin-top: 1.7vw;
}
.singleEntryT, .drFinalConfigInner .singleEntry8, .drFinalConfigInner .singleEntryT {
	width: 11.2%;
}
.drheightContSingleInner .singleEntry8, .drheightContSingleInner .singleEntryT {
	width: 20.3%;
	margin-left: 4.5vw;
}
.doubleEntry8, .doubleEntryT {
	width: 41.5%;
	margin-left: 0.5vw;
}
.doubleEntrylites {
	width: 33%;
}
.doubleEntry8lites {
	width: 34.5%;
}
.overlayEntryLiteSelN {
	width: 12%;
}
.overlayEntryLiteSelL, .overlayEntryLiteSelR {
	width: 17.5%;
}
.overlayEntryLiteSelB {
	width: 23%;
}

.drClrsCont, .frmClrsCont {
	display: inline-flex;
	flex-direction: column;
	text-align: center;
	margin: 0 0.5vw 0.5vw 0;
	font-size: 0.7vw;
}
.overlayEntryColors, .overlayFrameColors{
	border: solid 1px #aaa;
	cursor: pointer;
}
.overlayEntryFiber {
	position: relative;
	display: inline-flex;
	border: solid 1px #666;
	cursor: pointer;
}
.overlayEntryColors, .overlayEntryFiber, .overlayFrameColors {
	width: 7vw;
	height: 2.7vw;
}
.EntryDoorFrameColors {
	display: none;
}

.overlayEntryFiber:hover,
.overlayEntryColors:hover, .overlayEntryGlass:hover, .overlayFrameColors:hover {
	filter: brightness(125%);
}
.entryFGText {
	width: 80%;
	margin-top: 1vw;
	font-size: 1vw;
}
.OverlayEntryDoorFrameColorSele {
	margin-top: 1vw;
}
.OLFrameCheckBoxContainer {
	border: solid 1px #aaa;
	padding: 1vw;
	margin-top: 1.5vw;
}
.OLFrameCheckBoxContainer p {
	display: inline-block;
	width: 50%;
	font-size: 1.6vw;
	margin-left: 24%;
	text-align: center;
}
.OLFrameCheckBoxContainer h6 {
	font-size: 0.9vw;
	margin: 0;
	font-weight: 300;
	text-align: center;
}
.OLFrameCheckBoxContainer input[type=checkbox] {
	display: inline-block;
	height: 1.1vw;
	transform: scale(2);
	cursor: pointer;
}
.method input[type=checkbox] {
	display: inline-block;
	height: 1.1vw;
	transform: scale(1.4);
	cursor: pointer;
}
.overlayContentColors {
	width: 100%;
}
.overlayContentColors > p {
	font-size: 1.2vw;
	padding: 1vw 0;
	font-weight: bold;
}
.fiberColors {
	display: none;
}
.OverlayEntryWindowSele {
	margin: 1vw 0;
}


.tops {
	width: 100%;
	margin-top: 3vw;
}
.allTops {
	display: inline-block;
	height: 16vw;
	width: 15%;
	background-size: 100%;
	background-repeat: no-repeat;
	box-shadow: 1px 2px 3px rgb(0, 0, 0, 0.1);
	border: solid 1px #ccc;
	margin: 0 0.7vw 0.7vw 0;
}
.thumbs {
	display: none;
}

.OverlayDoorSizes img:hover, .OverlayDoorDesigns img:hover, .squareTopSele:hover, 
.overlayEntryDesignSele:hover, .overlayEntryLiteSel:hover, .doubleEntryT:hover, .doubleEntry8:hover,
.allTops:hover, .singleEntry:hover, .doubleEntry:hover, .singleEntryT:hover, .singleEntry8:hover {
	opacity: 0.8;
	cursor: pointer;
}
.overlayContentText, .overlayEntryContentText {
	width: 70%;
}
.overlayDetailBulletPoints {
	padding: 0 0 1vw 0;
	font-size: 1vw;
}
.OverlayEntryDoorColorSele, .OverlayENTRYDoorLockSele, .OverlayENTRYDoorGlassSele,
.OverlayEntryDoorFrameColorSele {
	padding: 0;
	font-size: 1.7vw;
	font-weight: bold;
	margin: 0;
}
.OverlayDoorSizesSele span, .OverlayDoorDesignSele span, .OverlayDoorColors span,
.OverlayENTRYDoorLockSele span, .OverlayEntryDoorFrameColorSele span {
	font-size: 1.5vw;
	font-weight: bold;
	color: tomato;
}

.extraDesign {
	position: relative;
	display: inline-block;
	padding: 5.2vw 2.5vw;
	background-color: #eee;
	vertical-align: top;
	font-size: 4vw;
	color: #666;
	font-weight: bolder;
	border: solid 1px #aaa;
	cursor: pointer;
}
.extraDesign:hover {
	color: #000;
	border: solid 1px #000;
}
.extraDesign:hover::after {
	content: "Click here to see other door designs";
	position: absolute;
	top: -2vw;
	right: -6vw;
	width: 9vw;
	padding: 0.5vw;
	font-size: 1vw;
	background-color: white;
	border: solid 1px #999;
	font-weight: normal;
}
.directSidelite {
	width: 100%;
	display: none;
}
.directContain p {
	display: inline-block;
	margin: 0.5vw 8vw 0.5vw 5.5vw;
}
.directSide {
	display: inline-block;
	height: 19vw;
	width: 36%;
	background-size: 100%;
	background-repeat: no-repeat;
	box-shadow: 1px 2px 3px rgb(0, 0, 0, 0.1);
	border: solid 1px #ccc;
	margin: 0.5vw 1vw 0.5vw 1vw;
	cursor: pointer;
}
.directSide:hover {
	border: solid 1px tomato;
}
.spacers {
	display: inline-block;
	vertical-align: top;
	padding-top: 8vw;
	font-weight: bold;
}
.spacer {
	width: 100%;
	height: 5vw;
}
.entryDesignPop {
	position: absolute;
	top: 6vw;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	width: 60%;
	max-width: 1000px;
	padding: 2vw 3vw 19vw 3vw;
	background-color: white;
	box-shadow: 0 0 10px rgb(0, 0, 0, 0.4);
	display: none;
	margin-bottom: 40vw;
}
.entryDesignPopH {
	color: #666;
	text-align: left;
	font-size: 1.3vw;
	font-weight: bold;
	margin: 3vw 0 2vw 0;
}
.entryDesignPop p {
	font-weight: bold;
	font-size: 1vw;
}
.entryDesignPop h3 {
	font-size: 1.3vw;
}
.entryDesignPop h3 span {
	font-size: 1vw;
}
.entryDesignBack {
	position: fixed;
	top: 0;
	left: 50%;
	width: 65%;
	max-width: 1000px;
	padding: 0 0.5vw;
	z-index: 21;
	transform: translateX(-50%);
	font-size: 1.6vw;
	border-bottom: solid 1px #666;
	background-color: white;
	display: none;
}
.entryDesignBack h4 {
	text-align: center;
}
.entryDesigns  {
	position: relative;
	width: 7.5%;
	display: inline-block;
	margin: 0 0.5vw;
	box-sizing: border-box;
	text-align: center;
}
.backArw {
	position: fixed;
	top: -2.5%;
	right: -10%;
	width: 6vw;
	font-size: 4vw;
	color: #ffffff;
	z-index: 50;
	cursor: pointer;
}
.backArw:hover::after  {
	content: "Close";
	position: absolute;
	top: 1vw;
	left: 3vw;
	padding: 0.2vw;
	background-color: white;
	border: solid 1px #ccc;
	color: black;
	font-size: 1vw;
}
.extraDesignPopBack {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
}
.entryDesigns img{
	width: 100%;
	box-shadow: 0 0 6px rgb(0, 0, 0, 0.3);
	cursor: pointer;
	padding: 1px;
}
.entryDesigns img:hover{
	box-shadow: 0 0 10px rgb(0, 0, 0, 0.8);
}
.entryDesigns p span {
	font-size: 0.8vw;
}
.entryDesigns p {
	font-size: 0.7vw;
}

.overlayEntryGlass {
	position: relative;
	display: inline-block;
	width: 5.9vw;
	cursor: pointer;
	margin: 1vw 0.4vw;
	z-index: 5;
}
.overlayEntryGlass img {
	border: solid 1px #666;
	width: 100%;
}
.olGlstxt {
	width: 93%;
	font-size: 0.7vw;
	text-align: center;
	padding: 0.2vw;
	border: solid 1px #666;
}
.overlayEntryGlassAfter {
	position: absolute;
	left: 2vw;
	bottom: 11vw;
	z-index: 20;
	border: solid 1px #666;
	background-size: 100%;
	background-repeat: no-repeat;
	filter: brightness(80%);
	width: 12vw;
	height: 17vw;
}
.overlayColorsAfter p, .overlayEntryGlassAfter p {
	position: absolute;
	z-index: 20;
	font-size: 1.1vw;
	background-color: rgb(256, 256, 256);
	padding: 2px 4px;
	border: solid 1px #aaa;
	text-align: right;
}
.overlayEntryGlassAfter p {
	bottom: 13.8vw;
	left: 10vw;
}

.hiddenNoWin, .hiddenWin, .hiddenWinNoLite {
	border-color: #ddd;
	filter: blur(2px);
}
.hiddenWinNoLite {
	display: none;
}
.availableWin::after {
	content: "Available";
	position: absolute;
	top: 1vw;
	right: 0;
	padding: 0.2vw 0.4vw;
	background-color: #444;
	font-size: 0.8vw;
	color: white;
}

.hiddenNoWin:hover::after {
	content: "Please select a DOOR STYLE above that has windows or select SIDE LITES under the DOOR DESIGN TAB";
}
.hiddenWinNoLite:hover::after {
	content: "This Glass is NOT AVAILABLE for this door's window size.";
}
.hiddenWin:hover::after {
	content: "This Glass is NOT AVAILABLE for this door's window size. *But it is AVAILABLE for the SIDE LITES";
}
.hiddenNoWin:hover::after, .hiddenWin:hover::after, .hiddenWinNoLite:hover::after {
	position: absolute;
	z-index: 22;
	bottom: 13vw;
	left: 10vw;
	font-size: 1vw;
	background-color: tomato;
	padding: 0.5vw 1vw;
	width: 7vw;
	color: white;
}
.lokRmv {
	font-size: 1.2vw;
	border: solid 2px #ccc;	
	padding: 2vw;
	cursor: pointer;
	font-weight: bold;
	width: 60%;
	margin-top: 4vw;
	text-align: center;
}
.lokRmv:hover {
	background-color: #eee;
}
.OlLokHead {
	margin-bottom: 1.5vw;
	padding: 1vw;
	border: solid 1px #aaa;
	background-color: #eee;
	font-size: 1vw;
}
.OlLokHead span{
	font-size: 1.8vw;
}
.OlLokMain {
	margin: 4vw 0;
	border: solid 1px #aaa;	
}
.overlayLockHead {
	font-size: 1.1vw;
	text-align: right;
	font-weight: bold;
	margin: 0.5vw 0.5vw 0 0 ;
}
.overlayLockMake {
	margin: -0.5vw 0.5vw 0.7vw 0;
	text-align: right;
	font-size: 0.7vw;
}
.overlayLockMake span {
	font-size: 0.9vw;
	color: tomato;
}
.OlLokCnt {
	display: inline-block;
	width: 23%;
	margin: 0 0 2vw 0.6vw;	
	vertical-align: top;
	border: solid 1px #ccc;
}
.OlLokCnt img{
	width: 50%;
}
.OlLokImgs {
	min-height: 26vw;
}
.OlLokImg {
	vertical-align: top;
	border-right: solid 1px #ddd;
}
.OlLokFtr, .OlLokFtPr {
	text-align: center;
	font-size: 1.1vw;
}
.OlLokFtr {
	border-top: solid 1px #ddd;
	margin:  0 0.7vw;
	padding-top: 0.5vw;
}
.OlLokFtPr {
	font-weight: bold;
}
.OlLokClrs {
	width: 26%;
	display: inline-block;
	text-align: right;
	font-size: 0.9vw;
	margin-left: 1.2vw;
	border: solid 1px #fff;
}
.OlLokClrs img {
	width: 100%;
	display: inline-block;
	cursor: pointer;
	border: solid 1px #eee;
}
.OlLokClrs img:hover {
	border: solid 1px tomato;
}
.overlayLockPrc {
	font-size: 1vw;
	font-weight: bold;
}


/* - End of Doors Content- */






/* - Garage Capping Overlay- */

	
.overlaySections, .hide-overlay .overlay5, .overlayGallery, .overlayEntrycontent, .smallGallery {
	display: none;
}
.overlay5 {
	background-color: rgba(0, 0, 0, .8);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;  
	z-index: 20; 
	-webkit-animation-name: fade-in;
	-webkit-animation-duration: 0.4s;
	animation-name: fade-in;
	animation-duration: 0.4s;
}
.overlay_img, .smallOl_img {
	position: relative;
	z-index: 30;
	margin: auto;
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-name: zoom;
	animation-duration: 0.6s; 
	border: 0.7vw solid white;	
}
.overlay_img {
	background-color: #fff;
}
.overlayGallery, .smallGallery {
	width: 60%;
	max-width: 1100px;
	margin: 4vw auto;
}
.OLGlsPopUp img{
	position: absolute;
	top: 17vw;
	left: 52%;
	width: 45%;
	max-width: 400px;
	border: solid 1px #aaa;
} 
.OLdrPopUp img{
	position: absolute;
	top: 3vw;
	left: 3vw;
	width: 30%;
	max-width: 250px;
	border: solid 1px #aaa;
} 
.OLGlsHd {
	height: 3.5vw;
	color: black;
	font-size: 1vw;
	padding: 1vw 2vw;
	background-color: sandybrown;
	text-align: right;
}
.OLGlsHd span {
	font-size: 1.3vw;
	font-weight: bold;
}
.smallOlHd {
	position: absolute;
	top: 1vw;
	right: 0;
	color: black;
	font-size: 1.3vw;
	padding: 1.5vw 2vw;
	background-color: sandybrown;
	text-align: right;
}
.smallOlHd h3 {
	margin: 0;
}
.smallOLGallery img {
	width: 100%;
	margin-bottom: -0.5vw;
}
.OLGlsCnt {
	height: 25vw;
	color: #333;
	font-size: 1vw;
	padding: 1vw 2vw 0 30vw;
	border-top: solid 1px #ccc;
	text-align: right;
	background-color: #eee;
}
.OLGlDsgr {
	margin: 6.5vw 2vw 2vw 48%;
	width: 45%;
	max-width: 400px;
	border: solid 1px #aaa;
	background-color: #eee;
	color: #333;
	padding: 1.5vw 1vw;
	font-size: 1.2vw;
	text-align: center;
	font-weight: bold;
}
.OLPnTtl {
	margin: 4vw 0 2vw 4vw;
	font-size: 1.1vw;
	font-weight: bold;
}
.OLPnls {
	margin: 0 0 2vw 2vw;
	display: inline-block;
}
.OLPnlCnt {
	position: relative;
	display: inline-block;
	width: 10%;
	max-width: 75px;
	margin: 0 1.5vw 1vw 0;
}
.OLPnlCnt img {
	width: 100%;
}
.OLPnTxt {
	font-size: 0.9vw;
	text-align: center;
}
.OLPnlCl {
	box-shadow: 1px 1px 3px rgb(0, 0, 0, 0.5);
	cursor: pointer;
	border: solid 1px #fff;
}
.OLPnlCl:hover {
	border: solid 1px sandybrown;
}
@-webkit-keyframes zoom {
	from {-webkit-transform:scale(0)} 
	to {-webkit-transform:scale(1)}
}  
@keyframes zoom {
	from {transform:scale(0)} 
	to {transform:scale(1)}
}
@-webkit-keyframes fade-in {
	from {opacity: 0;}
	to {opacity: 1;}
}
@keyframes fade-in {
	from {opacity: 0;}
	to {opacity: 1;}
}

.OLGlsTab {
	position: absolute;
	top: -1vw;
	right: 0;
	z-index: 40;
	background-color: tomato;
	color: white;
	text-align: center;
	padding: 0.5vw 1vw;
	font-size: 1.3vw;
	width: 30%;
}
.OverlaycloseBtn {
	position: fixed;
	top: 1vw;
	right: -1vw;
	width: 6vw;
	font-size: 4vw;
	color: #ffffff;
	z-index: 50;
	cursor: pointer;
}
.OverlaycloseBtn:hover::after  {
	content: "Close";
	position: absolute;
	top: 1vw;
	left: 3vw;
	padding: 0.2vw;
	background-color: white;
	border: solid 1px #ccc;
	color: black;
	font-size: 1vw;
}
.OLbuttonsnxt, .OLbuttonsprv, .OLsmallBtnsprv, .OLsmallBtnsnxt {
	position: fixed;
	top: 45%;
	z-index: 30;
	font-size: 5vw;
	color: white;
	margin: 0 10px;
	cursor: pointer;
	opacity: 0.8;
	padding: 0 1vw;
}
.OLbuttonsnxt:hover, .OLbuttonsprv:hover, .OLsmallBtnsprv:hover, .OLsmallBtnsnxt:hover {
	opacity: 1;
}
.OLbuttonsprv, .OLsmallBtnsprv {
    left: 0.5vw;
}
.OLbuttonsnxt, .OLsmallBtnsnxt {
    right: 1.5vw;
}
.cappingCounter, .smallOLCounter {
	position: absolute;
	font-size: 1.5vw;
	z-index: 30;
	color: #bbb;
	left: 0;
	top: -3vw;
}

/* - End of Garage Capping Overlay- */



.actOLSelect {
	border: solid 1px rgb(245, 160, 127); 
	position: relative;
	opacity: 1;
}
.actOLSelect::after {
	content: "Selected";
	position: absolute;
	top: -1.5vw;
	right: -0.8vw;
	background-color: tomato;
	color: #fff;
	padding: 0.3vw;
	z-index: 50;
	font-size: 0.8vw;
}